<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;background-color:white;top:15px;left:15px;line-height:45px;display:flex;flex-direction:column;box-shadow:0 0 8px gray;">
            <div id="填充方式" style="display:flex;flex-direction: row;align-items:center;">
                <span>填充方式:&nbsp;&nbsp;</span>
                <el-radio-group v-model="填充方式" @change="填充方式_change">
                    <el-radio-button value="cross">十字交叉</el-radio-button>
                    <el-radio-button value="diagonal-cross">斜线交叉</el-radio-button>
                    <el-radio-button value="solid">实体填充</el-radio-button>
                    <el-radio-button value="none">无填充</el-radio-button>
                </el-radio-group>
            </div>
            <div id="颜色" style="display:flex;flex-direction: row;align-items:center;">
                <span>填充颜色:&nbsp;&nbsp;</span>
                <el-color-picker color-format='rgb' v-model="color_value" :show-alpha="true"
                :predefine="predefineColors" @change="color_change" ></el-color-picker>
                <span style="margin-left:40px">边线颜色:&nbsp;&nbsp;</span>
                <el-color-picker  color-format='rgb' v-model="边线color_value" 
                :predefine="predefineColors" @change="边线color_change" ></el-color-picker>
            </div>
        </el-main> 
    </div>
</template>

<script setup>
import * as 天地图 from '../天地图'
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
const 填充方式=ref('solid')//双向绑定变量,控制填充方式
const 填充方式_change=()=>{
  要素图层.renderer.symbol.style=填充方式.value
}
const color_value=ref('rgba(0,206,209,0.3)')//双向绑定变量,控制填充颜色
const 边线color_value=ref('rgba(0,206,209,1)')//双向绑定变量,控制边线颜色
const predefineColors = ref([//提供默认颜色
    '#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1', '#1e90ff', '#c71585',
])
const color_change=()=>{//调整填充颜色
    要素图层.renderer.symbol.color=color_value.value
}
const 边线color_change=()=>{//调整边线颜色
    要素图层.renderer.symbol.outline.color=边线color_value.value
}
var map,view,要素图层

要素图层=new FeatureLayer({
  url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
  renderer:{
    type:"simple",
    symbol:{ 
      type:"simple-fill",
      style:填充方式.value,
      color:color_value.value,
      outline:{
        color:边线color_value.value,
        width:0.5
      }
    }
  }
})
map=new Map({
  basemap:{
    baseLayers:天地图.天地图矢量_无标注
  },
  layers: [要素图层]
})
onMounted(()=>{
  view = new MapView({
    map: map,  container: "viewDiv",
    center:[120.4,36.1],zoom:15,
    constraints:{
        minScale:500000,
        maxScale:1300,
        rotationEnabled:false
    },
  })
  view.ui.remove(["zoom","attribution"])
})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}
span{
  white-space: pre-line;
}
</style>
  